<template>
    <div>
        <div>
            <el-button @click="exceptExcel">导出</el-button>
            <el-button @click="Add">新增</el-button>
        </div>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">

            <el-form-item label="质检编号">
                <el-input v-model="formInline.Qcode" placeholder="质检编号" clearable style="width: 150px;" />
            </el-form-item>

            <el-form-item label="质检时间">
                <el-date-picker v-model="formInline.Stime" type="date" placeholder="开始时间" clearable
                    style="width: 150px;" />
                <el-date-picker v-model="formInline.Etime" type="date" placeholder="结束时间" clearable
                    style="width: 150px;" />
            </el-form-item>

            <el-form-item label="质检结果">
                <el-select v-model="formInline.QcOutcome" placeholder="质检结果" style="width: 150px;" clearable>
                    <el-option value="合格">合格</el-option>
                    <el-option value="不合格">不合格</el-option>
                </el-select>

            </el-form-item>
            <el-form-item label="审核结果">
                <el-select v-model="formInline.AuditResults" placeholder="审核结果" clearable style="width: 150px;">
                    <el-option value="紧急放行">紧急放行</el-option>
                    <el-option value="让步接收">让步接收</el-option>
                    <el-option value="不合格数退货">不合格数退货</el-option>
                </el-select>

            </el-form-item>
            <el-form-item label="质检主题">
                <el-input v-model="formInline.Qname" placeholder="质检主题" clearable style="width: 150px;" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="GetList">查询</el-button>
            </el-form-item>
        </el-form>



        <el-table :data="tableData" stripe style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" />
            <el-table-column type="index" label="序号" />
            <el-table-column prop="qualityNumber" label="质检编号" />
            <el-table-column prop="qualityName" label="质检主题" />
            <el-table-column prop="pcName" label="采购合同" />
            <el-table-column prop="qcPerson" label="质检人员" />
            <el-table-column prop="applyName" label="申请人员" />
            <el-table-column prop="qcOutcome" label="质检结果" />
            <el-table-column prop="augitName" label="审核人" />
            <el-table-column prop="auditResults" label="审核结果" />
        </el-table>


    </div>

    <table style="margin: auto;">
        <tr>
            <td>
                <el-pagination v-model:current-page="page.pageIndex" v-model:page-size="page.pageSize"
                    :page-sizes="[2, 4, 6, 8]" :background="true" layout="total,slot,sizes"
                    :total="page.totalcount">
                    <span> , 每页 {{ page.pageSize }} 条，当前 {{ page.pageIndex }} / {{ page.pagecount }} 页</span>
                </el-pagination>
            </td>
            <td>
                <el-pagination v-model:current-page="page.pageIndex" v-model:page-size="page.pageSize"
                    :page-sizes="[2, 4, 6, 8]" :background="true" prev-text="上一页" next-text="下一页"
                    layout="slot, prev, pager, next" :total="page.totalcount">
                    <el-button :disabled="page.pageIndex == 1" @click="page.pageIndex = 1">首页</el-button>
                </el-pagination>
            </td>
            <td>
                <el-pagination v-model:current-page="page.pageIndex" v-model:page-size="page.pageSize"
                    :page-sizes="[2, 4, 6, 8]" :background="true" prev-text="上一页" next-text="下一页"
                    layout="slot, jumper" :total="page.totalcount">
                    <el-button :disabled="page.pageIndex == page.pagecount"
                        @click="page.pageIndex = page.pagecount">尾页</el-button>
                </el-pagination>
            </td>
        </tr>
    </table>
</template>

<script setup lang="ts">
import { reactive, ref, computed, watch, onMounted } from 'vue'
import { Search } from '@element-plus/icons-vue'
import axios from 'axios'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
const route = useRoute()
const router = useRouter()
import * as XLSX from 'xlsx';
import http from '../../../http.js'

const tableData = ref([])
const page = reactive({
    pageIndex: 1,
    pageSize: 15,
    totalcount: 0,
    pagecount: 0
})

watch(page, () => {
    GetList()
})
const formInline = reactive({
    Qname: '',
    Stime: '',
    Etime: '',
    Qstatus: '',
    Qcode: '',
    QcOutcome: '',
    AuditResults: ''
})

const GetList = () => {
    axios.get(http.zblnb + "/cg/api/ProAugit/ShowProAugit", {
        params: {
            PageIndex: page.pageIndex,
            pageSize: page.pageSize,
            Qname: formInline.Qname,
            Stime: formInline.Stime,
            Etime: formInline.Etime,
            Qstatus: formInline.Qstatus,
            Qcode: formInline.Qcode,
            QcOutcome: formInline.QcOutcome,
            AuditResults: formInline.AuditResults,
        }
    }).then(res => {
        console.log(res.data)
        tableData.value = res.data.data.list
        page.totalcount = res.data.totalcount
        page.pagecount = res.data.pagecount

    })
}

const Add = () => {
    router.push('/ProductQualityAdd')
}

const sel = ref([])
const handleSelectionChange = (val: any) => {
    sel.value = val;
}


//导出
const exceptExcel = () => {
    ElMessageBox.confirm("是否确认导出?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
    })
        .then((response) => {
            //  this.selectdata 是复选框的 数据列表
            if (sel.value.length <= 0) {
                ElMessage.warning('请选择数据！');
                return;
            }
            let tableData = [
                ['序号', '质检编号', '质检主题', '采购合同', '质检人员', '申请人员', '质检结果', , '审核人', '审核结果']
            ] // 表格表头
            sel.value.forEach((item, index) => {
                let rowData = []
                //导出内容的字段
                rowData = [
                    index + 1,
                    item.qualityNumber,
                    item.qualityName,
                    item.pcName,
                    item.qcPerson,
                    item.applyName,
                    item.qcOutcome,
                    item.augitName,
                    item.auditResults,

                ]
                tableData.push(rowData)
            })
            let workSheet = XLSX.utils.aoa_to_sheet(tableData);
            let bookNew = XLSX.utils.book_new();
            XLSX.utils.book_append_sheet(bookNew, workSheet, '质检审核') // 工作簿名称
            let name = '到货质检审核' + '.xlsx'
            XLSX.writeFile(bookNew, name) // 保存的文件名
        })
}

onMounted(() => {
    GetList()
})

</script>

<style scoped></style>